<template>
	<view class="detail">
		<view class="detail_info">
			<view class="content_box">
				<text>阵地名称</text>
				<view class="content_list">{{ detailInfo.position_name }}</view>
			</view>
			<view class="content_box">
				<text>阵地地址</text>
				<view class="content_list">{{ detailInfo.position_address }}</view>
			</view>
			<view class="content_box">
				<text>阵地简介</text>
				<view class="content_list">{{ detailInfo.position_intro }}</view>
			</view>
			<view class="content_box">
				<text>红色文化亮点</text>
				<view class="content_list">
					{{ detailInfo.culture_highlight }}
				</view>
			</view>
			<view class="content_box" v-if="detailInfo.video_path">
				<text>视频作品</text>
				<view class="content_list">
					<video :src="`http://127.0.0.1:8000${detailInfo.video_path}`" controls="" style="width:100%" />
				</view>
			</view>
			<view />
			<view class="content_box">
				<text>参观信息</text>
				<view class="content_list">
					<uni-table border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center">预约方式</uni-th>
							<uni-th align="center">参观时长（小时）</uni-th>
							<uni-th align="center">阵地地址</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">{{detailInfo.reservation_method}}</uni-td>
							<uni-td align="center">{{detailInfo.visit_duration}}</uni-td>
							<uni-td align="center">{{detailInfo.position_address}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="content_box" v-if="detailInfo.image_path">
				<text>图文展示</text>
				<view class="content_list">
					<img :src="`http://127.0.0.1:8000${detailInfo.image_path}`" alt="" style="width:100%" />
				</view>
			</view>

			<view class="content_box">
				<text>展陈大纲</text>
				<view class="content_list">
					{{ detailInfo.exhibition_outline }}
				</view>
			</view>
			<view />
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('detailInfo', (data) => {
				this.detailInfo = JSON.parse(data.data)
			})
		},
		data() {
			return {
				detailInfo: {},
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.detail {
		width: 100%;
		height: 100vh;
		background-image: url('https://gd-hbimg.huaban.com/83d403c28f3298a8dc4653836cd16fdf4f6649186b14f9-AnXh6w_fw240webp');
		background-size: cover;
		display: flex;
		flex-flow: column nowrap;
		overflow: auto;
	}

	.detail_info {
		width: 95%;
		height: 95%;
		border-radius: 10px;
		margin: 10px auto 5px;
	}

	.content_box {
		width: 99%;
		margin: 5px auto;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 5px;
		padding: 20px;
		overflow: auto;
		box-sizing: border-box;
	}

	.content_box text {
		font-size: 32rpx;
		font-weight: 600;
	}

	.content_list {
		margin: 10px 0;
	}

	>>>.uni-table {
		min-width: 200rpx !important;
	}
</style>